<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <h3>指令</h3>
        <p>v-bind 指令用于为属性(attribute)绑定值</p>
        <p>v-bind:attribute="property" 可以缩写为 :attribute="property"</p>

        <div id="app">

            <input type="radio" v-model="buttonType" value="text" id="first">
            <label for="first">输入框</label>

            <input type="radio" v-model="buttonType" value="button" id="second">
            <label for="second">普通按钮</label>

            <hr>

            <!-- 对于 input 元素(element)来说，type 是 input 元素的属性(attribute) -->
            <!-- 这里的 v-bind:type 用于为 input 元素的 type 属性绑定值 -->
            <!-- 在 等号之后的 buttonType 表示 响应式对象 中的 属性(property)-->
            <input v-bind:type="buttonType" v-bind:value="buttonValue" >

            <hr>
            <!-- 使用语法糖 -->
            <input :type="buttonType" :value="buttonValue" >
        </div>

        <script type="text/javascript">
            const app = Vue.createApp({
                data(){
                    return {
                        buttonType: 'button' ,
                        buttonValue: '猜猜我是什么'
                    }
                }
            });

            const vm = app.mount( "#app" );
        </script>
        
    </body>
</html>